{include file="public/header"}
<script type="text/javascript" src="__WEBJS__/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="__WEBJS__/layer/layer.js"></script>
<script type="text/javascript" src="__WEBJS__/form.js"></script>
<link type="text/css" rel="stylesheet" href="__WEBCSS__/layui.css" />
<link type="text/css" rel="stylesheet" href="__WEBCSS__/imgUp.css" />
<style type="text/css">
    .xzy21 input{ float:left;display:inline;width:110px;height:110px;position:absolute;z-index:99;cursor:pointer;filter:alpha(opacity=0);opacity:.0; }
</style>
<script type="text/javascript">
$(function(){
    $(".subNav").click(function(){
        $(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd");
        $(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt");
        $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(500);
    })  
})
</script>



<div class="gsjj">
	<div class="gsjjn">
    	<div class="gsjjnz">
        <div class="subNavBox">
		{notempty name="type"}
			{volist name="type" id="vo" key="k"}
			{if condition="$k== '1'"} 
				<div class="subNav currentDd currentDt">{$vo.name}</div>
				<ul class="navContent " style="display:block">
				{notempty name="$vo.list"}
				{volist name="$vo.list" id="loop"}
					<li><a href="{:url('cases/index',['type'=>$loop.id])}"><img src="__IMG__/image/gs1.png" />{$loop.name}</a></li>
				{/volist}
				{/notempty}
				</ul>
			{else}   
				<div class="subNav">{$vo.name}</div>
				<ul class="navContent">
				{notempty name="$vo.list"}
				{volist name="$vo.list" id="loop"}
					<li><a href="{:url('cases/index',['type'=>$loop.id])}"><img src="__IMG__/image/gs1.png" />{$loop.name}</a></li>
				{/volist}
				{/notempty}
				</ul>
			{/if}
			{/volist}
		{else}
		暂时没有信息
		{/notempty}
        </div>

        </div>
    	<div class="gsjjny">
        	<div class="ywly_t">社工申请</div>
            <div class="sgsq_yn">
			<form id="form" action="{:url('shegong/add')}" action="post"  enctype="multipart/form-data">
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                    <div class="sgsq_ynry">
                    	<input name="name" type="text" class="sgsq_ynry1" />
                    	<span class="sgsq_ynry2">*</span>
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
                    <div class="sgsq_ynry">
                    	<input name="phone" type="text" class="sgsq_ynry1" />
                    	<span class="sgsq_ynry2">*</span>
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">服务社区：</span>
                    <div class="sgsq_ynry">
                    	<select name="area" class="sgsq_ynry1" >
						
                        	<option value="">请选择</option>
							{volist name="shequ" id="vo"}
                        	<option  value="{$vo.id}">{$vo.name}</option>
							{/volist}
                        </select>
                    	<select name="jie" class="sgsq_ynry1" >
                        	<option>请选择</option>
                        </select>
                    	<span class="sgsq_ynry2">*</span>
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">照&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片：</span>
                    <div class="sgsq_ynry">
                    	<!-- <span class="sgsq_ynry3"> -->
						<div class="lksc_tkn">
							<div id="img_area"></div>
							<div class="xzy2"  style="width:40px;">
								<span class="xzy21 tj_area" style="position: relative; width: 100px; height: 100px; float: left; display: inline;">
									<img width="110" height="110" src="__IMG__/image/t4.png" />
									<input class="img_add" name="img[]" type="file" style="float: left; display: inline; width: 100%; height: 100%; position: absolute; z-index: 99; left: 0; top: 0;" />
								</span>
							</div>
						</div>
						<!-- </span> -->
						
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">个人简介：</span>
                    <div class="sgsq_ynry">
                    	<textarea class="sgsq_ynry4" name="dec" cols="" rows=""></textarea>
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">专业特长：</span>
                    <div class="sgsq_ynry">
                    	<textarea class="sgsq_ynry4" name="techang" cols="" rows=""></textarea>
                    </div>
                </div>
            	<div class="sgsq_ynr">
                	<span class="sgsq_ynrz">&nbsp;</span>
                    <div class="sgsq_ynry">
                    	<a href="javascript:;" id="submit" class="sgsq_ynry5">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>
                        <a href="javascript:;" onclick="formReset()" class="sgsq_ynry6">重&nbsp;&nbsp;&nbsp;&nbsp;置</a>
                    </div>
                </div>
				</form>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
 //上传相册
    $(document).on('change','.img_add',function(){
        var file = $(this).context.files[0]; //获取file对象
        var file_val = $(this).val();
        //判断file的类型是不是图片类型。
        if(!/image\/\w+/.test(file.type)){
            layer_alert("文件必须为图片！");
            return false;
        }

        var reader = new FileReader(); //声明一个FileReader实例
        reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
        //最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
        reader.onload = function(e) {
            var img_html = '<span class="cssp_mnytpzxc img_box">'+
                                '<span class="ccpl_xn1"><img src="'+this.result+'" /></span>'+
                                '<a href="javascript:;" class="ccpl_xn2 img_del"><img src="__IMG__/image/del.png" /></a>'+
                            '</span>';
            $('#img_area').append(img_html);
        }
        $(this).removeClass('img_add');
        $(this).hide();
        $('.xzy21').append('<input type="file" style="float: left; display: inline; width: 100%; height: 100%; position: absolute; z-index: 99; left: 0; top: 0;"  name="img[]" class="img_add" />');
    });

    //删除图片
    $(document).on('click','.img_del', function() {
        var i = $(this).index('.img_del');
        $('.img_box:eq(' + i + ')').remove();
        $('[name="img[]"]:eq(' + i + ')').remove();
    });

	 $("#submit").click(function(){

            $("#form").ajaxSubmit({
          type: "post",  
          dataType:"json",
          url:"{:url("shegong/add")}",
          success: function(res){
            console.log(res);
            if(res.code == 1) {
              layer.msg(res.msg);
              setTimeout(function() {window.location.reload ( );}, 1500);
            } else {
              layer.msg(res.msg);
              }
          },
          error: function(XmlHttpRequest, textStatus, errorThrown){
            alert( "error");
          }
        });
        })
})
	$("select[name=area]").change(function(){
	var id=$(this).val();
		$.post(
			"{:url('shegong/ajax')}",
			{id:id},
			function(res){
				$("select[name=jie]").html(res);
			}
		)
	})
    function formReset()
{
document.getElementById("form").reset();
}
</script>
{include file="public/footer"}